<template>
    <div>
        <h1>Radio 单选框</h1>
            <Anchor title="概述" h2></Anchor>
            <p>基本组件-单选框。主要用于一组可选项单项选择，或者单独用于切换到选中状态。</p>
            <Anchor title="代码示例" h2></Anchor>
            <Demo title="单独使用">
                <div slot="demo">
                    <Radio v-model="single">Radio</Radio>
                    <p class="demo-data">{{ single }}</p>
                </div>
                <div slot="desc">
                    <p>使用 v-model 可以双向绑定数据。</p>
                </div>
                 <i-code lang="html" slot="code">{{ code.single }}</i-code>
            </Demo>
            <Demo title="组合使用">
                <div slot="demo">
                    <RadioGroup v-model="phone">
                        <Radio label="apple">
                            <Icon type="social-apple"></Icon>
                            <span>Apple</span>
                        </Radio>
                        <Radio label="android">
                            <Icon type="social-android"></Icon>
                            <span>Android</span>
                        </Radio>
                        <Radio label="windows">
                            <Icon type="social-windows"></Icon>
                            <span>Windows</span>
                        </Radio>
                    </RadioGroup>
                    <p class="demo-data">{{ phone }}</p>
                    <RadioGroup v-model="animal">
                        <Radio label="金斑蝶"></Radio>
                        <Radio label="爪哇犀牛"></Radio>
                        <Radio label="印度黑羚"></Radio>
                    </RadioGroup>
                    <p class="demo-data">{{ animal }}</p>
                </div>
                <div slot="desc">
                    <p>使用<code>RadioGroup</code>实现一组互斥的选项组。在组合使用时，<code>Radio</code> 使用 <code>label</code> 来自动判断。每个 Radio 的内容可以自定义，如不填写则默认使用 label 的值。</p>
                </div>
                 <i-code lang="html" slot="code">{{ code.group }}</i-code>
            </Demo>
            <Demo title="不可用">
                <div slot="demo">
                    <Radio v-model="disabledSingle" disabled>Radio</Radio>
                    <p class="demo-data">{{ disabledSingle }}</p>
                    <RadioGroup v-model="disabledGroup">
                        <Radio label="金斑蝶" disabled></Radio>
                        <Radio label="爪哇犀牛"></Radio>
                        <Radio label="印度黑羚"></Radio>
                    </RadioGroup>
                    <p class="demo-data">{{ disabledGroup }}</p>
                </div>
                <div slot="desc">
                    <p>通过设置<code>disabled</code>属性来禁用单选框。</p>
                </div>
                 <i-code lang="html" slot="code">{{ code.disabled }}</i-code>
            </Demo>
            <Demo title="垂直">
                <div slot="demo">
                    <RadioGroup v-model="vertical" vertical>
                        <Radio label="apple">
                            <Icon type="social-apple"></Icon>
                            <span>Apple</span>
                        </Radio>
                        <Radio label="android">
                            <Icon type="social-android"></Icon>
                            <span>Android</span>
                        </Radio>
                        <Radio label="windows">
                            <Icon type="social-windows"></Icon>
                            <span>Windows</span>
                        </Radio>
                    </RadioGroup>
                </div>
                <div slot="desc">
                    <p>设置属性 <code>vertical</code> 可以垂直显示，按钮样式下无效。</p>
                </div>
                 <i-code lang="html" slot="code">{{ code.vertical }}</i-code>
            </Demo>
        <div class="api">
            <Anchor title="API" h2></Anchor>
            <Anchor title="Radio props" h3></Anchor>
            <table>
                <thead>
                <tr>
                    <th>属性</th>
                    <th>说明</th>
                    <th>类型</th>
                    <th>默认值</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>value</td>
                    <td>只在单独使用时有效。可以使用 <code>v-model</code> 双向绑定数据</td>
                    <td>Boolean</td>
                    <td>false</td>
                </tr>
                <tr>
                    <td>label </td>
                    <td>只在组合使用时有效。指定当前选项的 value 值，组合会自动判断当前选择的项目</td>
                    <td>String | Number</td>
                    <td>-</td>
                </tr>
                <tr>
                    <td>disabled</td>
                    <td>是否禁用当前项</td>
                    <td>Boolean</td>
                    <td>false</td>
                </tr>
                <tr>
                    <td>size</td>
                    <td>单选框的尺寸，可选值为 <code>large</code>、<code>small</code>、<code>default</code> 或者不设置</td>
                    <td>String</td>
                    <td>-</td>
                </tr>
                <tr>
                    <td>true-value</td>
                    <td>选中时的值，当使用类似 1 和 0 来判断是否选中时会很有用</td>
                    <td>String, Number, Boolean</td>
                    <td>true</td>
                </tr>
                <tr>
                    <td>false-value</td>
                    <td>没有选中时的值，当使用类似 1 和 0 来判断是否选中时会很有用</td>
                    <td>String, Number, Boolean</td>
                    <td>false</td>
                </tr>
                </tbody>
            </table>
            <Anchor title="Radio events" h3></Anchor>
            <table>
                <thead>
                <tr>
                    <th>事件名</th>
                    <th>说明</th>
                    <th>返回值</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>on-change</td>
                    <td>在选项状态发生改变时触发，返回当前状态。通过修改外部的数据改变时不会触发</td>
                    <td>...</td>
                </tr>
                </tbody>
            </table>
            <Anchor title="RadioGroup props" h3></Anchor>
            <table>
                <thead>
                <tr>
                    <th>属性</th>
                    <th>说明</th>
                    <th>类型</th>
                    <th>默认值</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>value</td>
                    <td>指定当前选中的项目数据。可以使用 <code>v-model</code> 双向绑定数据</td>
                    <td>String | Number</td>
                    <td>-</td>
                </tr>
                <tr>
                    <td>type</td>
                    <td>可选值为 button 或不填，为 button 时使用按钮样式</td>
                    <td>String</td>
                    <td>-</td>
                </tr>
                <tr>
                    <td>size</td>
                    <td>尺寸，可选值为<code>large</code>、<code>small</code>、<code>default</code>或者不设置</td>
                    <td>String</td>
                    <td>-</td>
                </tr>
                <tr>
                    <td>vertical</td>
                    <td>是否垂直排列，按钮样式下无效</td>
                    <td>Boolean</td>
                    <td>false</td>
                </tr>
                </tbody>
            </table>
            <Anchor title="RadioGroup events" h3></Anchor>
            <table>
                <thead>
                <tr>
                    <th>事件名</th>
                    <th>说明</th>
                    <th>返回值</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>on-change</td>
                    <td>在选项状态发生改变时触发，返回当前选中的项。通过修改外部的数据改变时不会触发</td>
                    <td>...</td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</template>

<script>
  import Demo from './demo/demo.vue';
  import Anchor from './anchor.vue';
  import iCode from './code/code';
  import Code from './code/radio';
  import 'codemirror/mode/jsx/jsx.js'
  import 'codemirror/theme/tomorrow-night-eighties.css'


  export default {
    name: 'HelloWorld',
    components: {
      Anchor,
      Demo,
      iCode,
      Code,
    },
    mounted () {

        },
    methods: {

    },
    data () {
      return {
        code: Code,
        single: false,
        phone: 'apple',
        animal: '爪哇犀牛',
        disabledSingle: true,
        disabledGroup: '爪哇犀牛',
        vertical: 'apple',
      }
    },
  }
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

    h1, h2 {
        font-weight: normal;
    }

    ul {
        list-style-type: none;
        padding: 0;
    }

    li {
        display: inline-block;
        margin: 0 10px;
    }

    a {
        color: #42b983;
    }
    div{
        position: relative;
        font-size: 14px;
    }
    span.copy, span.scale, span.open-fiddle{
        border-radius: 0 0 3px 3px;
        padding: 2px 5px;
        position: absolute;
        top: 5px;
        right: 0;
        color: #b2b2b2;
        cursor: pointer;
    }
    span.scale{
        right: 25px;
    }
    span.open-fiddle{
        right: 50px;
    }
    .bg + span.copy{
        right: 5px;
    }
    span.copy:hover, span.scale:hover, span.open-fiddle:hover{
        color: #5c6b77;
    }

    .api table {
        font-family: Consolas,Menlo,Courier,monospace;
        font-size: 12px;
        border-collapse: collapse;
        border-spacing: 0;
        empty-cells: show;
        border: 1px solid #e9e9e9;
        width: 100%;
        margin-bottom: 24px
    }

    .api table th {
        background: #f7f7f7;
        white-space: nowrap;
        color: #5c6b77;
        font-weight: 600
    }

    .api table td,.api table th {
        border: 1px solid #e9e9e9;
        padding: 8px 16px;
        text-align: left
    }

    .api table td ul li {
        font-size: 12px!important
    }
</style>
